<template>
    <view class="ker-list-cell">
		<view class="cell-left-content" :class="{'cell-border-1px':isBorder}">
			<slot></slot>
		</view>
		<view class="cell-right-arrow"
			  :style="{
				'border':`solid ${arrowColor}`,
				'borderWidth':`0 ${arrowWidth}px ${arrowWidth}px 0`,
				'padding':`${arrowSite}px`
			  }" v-if="isArrow"></view>
    </view>
</template>
<script>
export default {
	data() {
	  return {

	  }
	},
	props:{
		isBorder:{	//显示边框
		   type:Boolean,
		   default:true
		},
		isArrow:{	//显示箭头
			type:Boolean,
			default:false
		},
		arrowColor:{	//箭头颜色
			type:String,
			default:'silver'
		},
		arrowWidth:{	//箭头宽度
			type:[String,Number],
			default:'1'
		},
		arrowSite:{	//箭头大小
			type:[String,Number],
			default:'4'
		}
	},
	methods:{

	},
	mounted() {
	}
}
</script>
<style lang='scss' scoped>
	.ker-list-cell{
		position: relative;
		padding: 15px;
		.cell-left-content{
			padding-right: 15px;
			&.cell-border-1px::after{
				position: absolute;
				content: '';
				left: 15px;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: #eaeef1;
				transform: scaleY(50%);
			}
		}
		.cell-right-arrow{
			position: absolute;
			right: 15px;
			top: 50%;
			display: inline-block;
			transform: rotate(-45deg) translateY(-50%);
			  -webkit-transform: rotate(-45deg) translateY(-50%);
		}
	}
</style>